import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { YmTable } from 'ym-design';
import { mockTabelList } from './mockData';

function YmTableScroll() {
  const commonColums = [
    {
      title: '名称',
      dataIndex: 'regulatorName',
      key: 'regulatorName',
      width: 160,
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'entTypeCode',
      key: 'entTypeCode',
      width: 100,
      ellipsis: true,
    },
    {
      title: '是否直接监管机构',
      dataIndex: 'directFlag',
      key: 'directFlag',
      width: 160,
      render(value: any) {
        return value === 1 ? '是' : '否';
      },
    },
    {
      title: '机构类型',
      dataIndex: 'organizationType',
      key: 'organizationType',
      width: 140,
      render(value: any) {
        return value === 'fgcc'
          ? '非工程车'
          : value === 'gcc'
          ? '工程车'
          : '外籍车';
      },
    },

    {
      title: '备案人员类型',
      dataIndex: 'personTypeCode',
      key: 'personTypeCode',
      width: 140,
      ellipsis: true,
    },
    {
      title: '备案车辆类型',
      dataIndex: 'registerCarTypeCode',
      key: 'registerCarTypeCode',
      width: 140,

      ellipsis: true,
    },
    {
      title: '运输类型',
      dataIndex: 'transportCode',
      key: 'transportCode',
      width: 140,
      ellipsis: true,
    },
    {
      title: '是否会员',
      dataIndex: 'member',
      key: 'member',
      width: 140,
      render(value: any) {
        return value === 1 ? '是' : '否';
      },
    },
    {
      title: '服务商可备案企/车',
      dataIndex: 'serviceFilingFlag',
      key: 'serviceFilingFlag',
      width: 140,
      render(value: any) {
        return value === 1 ? '是' : '否';
      },
    },
    {
      title: '企业',
      dataIndex: 'entNum',
      key: 'entNum',
      width: 100,
    },
    {
      title: '司机',
      dataIndex: 'personNum',
      key: 'personNum',
      width: 100,
    },
    {
      title: '车辆',
      dataIndex: 'carNum',
      key: 'carNum',
      width: 100,
    },
    {
      title: '操作',
      key: '_operate',
      width: 140,
      render(record: any) {
        return (
          <>
            <Button type="link">编辑</Button>
            <Button type="link">删除</Button>
          </>
        );
      },
    },
  ];

  return (
    <div>
      <div style={{ width: '600px', height: '600px' }}>
        <YmTable
          columns={commonColums}
          rowKey="regulatorId"
          expandable={{
            childrenColumnName: 'children',
            expandIconColumnIndex: 0,
            columnTitle: '操作',
            defaultExpandAllRows: true,
            indentSize: 30,
            expandIcon: ({ expanded, onExpand, record }) => {
              if ((record as any).children?.length) {
                return expanded ? (
                  <>
                    <CaretDownOutlined
                      className="care-up"
                      onClick={(e) => onExpand(record, e)}
                    />
                    &nbsp;
                  </>
                ) : (
                  <>
                    <CaretRightOutlined
                      className="care-up"
                      onClick={(e) => onExpand(record, e)}
                    />
                    &nbsp;
                  </>
                );
              } else {
                return null;
              }
            },
          }}
          request={async ({ page }) => {
            return {
              list: mockTabelList,
              total: 6,
            };
          }}
        />
      </div>
    </div>
  );
}

export default YmTableScroll;
